Who should take this course?

Grokking JavaScript Fundamentals

Rate this course

Ask Author

Contribute

Back to course home

0% completed

Vote For New Content

Introduction

Who should take this course?

Course Overview

Introduction to JavaScript

JavaScript Basics

JavaScript - Hello World

JavaScript - Comments

Quiz

JavaScript Variables and Operators

JavaScript - Variables

JavaScript - Operators

Quiz

JavaScript Conditionals

Introduction to Conditional Statements in JavaScript

JavaScript - If...Else

JavaScript - Switch Case

Quiz

JavaScript Objects

Introduction to Objects in JavaScript

JavaScript - Number

JavaScript - Boolean

JavaScript - Math

JavaScript - Date

Quiz

JavaScript - Functions

Introductions to Function in JavaScript

JavaScript - Variable Scope

JavaScript - Default Parameters

JavaScript - Arrow Functions

Quiz

JavaScript - String and Arrays

Introduction to Strings in JavaScript

JavaScript - String Methods

Introduction to Array in JavaScript

JavaScript - Array Methods

Quiz

JavaScript Loops

Introduction to loops in JavaScript

JavaScript - for loop

JavaScript - while loop

JavaScript - do-while loop

JavaScript - for-in loop

JavaScript - for-of loop

JavaScript - Loop Control

Quiz

JavaScript - Maps and Sets

JavaScript - Maps

JavaScript - Sets

Quiz

Conclusion

Where to Go from Here

JavaScript - Switch Case

In JavaScript, the switch statement provides a way to execute different parts of code based on the outcome of an expression. It's a useful and clear alternative to multiple if...else if statements, particularly when you need to compare a single value against many potential matches. The switch structure simplifies the decision-making process in your code by providing a neat and readable format.

Syntax

The syntax for a switch statement is structured as follows:

Javascript

. . . .

expression: This is evaluated once at the start of the switch statement. Its result is then compared with the values of each case.
case value1, value2, ...: These are the potential matches for the expression's result. Each case is tested until a match is found.
break: This keyword stops the execution of more cases in the switch block. Without it, the script will continue executing the next case regardless of a match.
default: This is an optional clause that runs if none of the cases match the expression. It's akin to the final else in an if...else chain.

Execution Flow

The expression within the switch parenthesis is evaluated.
The evaluated result is compared with the value of each case in the order they appear.
If a match is found, the associated block of code runs.
The break keyword prevents the execution from falling through to the next case.
If no case matches, and a default clause exists, its code runs.

Example

Consider a simple example where we determine the type of a given variable:

Javascript

// Define a variable with a numeric type
var variableType = typeof 42; // "number"
switch (variableType) {
    case "number":
        console.log("The variable is of type Number.");
        break;
    case "string":
        console.log("The variable is of type String.");
        break;
    case "boolean":
        console.log("The variable is of type Boolean.");
        break;
    default:
        console.log("The variable type is unknown.");
}
// Expected output: "The variable is of type Number."

. . . .

In this example:

The typeof operator determines the type of 42, which is "number".
The switch statement then evaluates variableType.
It finds a matching case for "number" and executes the corresponding code block, logging a message to the console.
Upon reaching the break keyword, it exits the switch block without checking subsequent cases.

This beginner-friendly example demonstrates how the switch statement can simplify the process of selecting among multiple potential actions based on the value of a single expression.

The default Keyword

The default keyword in a switch statement is similar to the else statement in an if...else condition. It executes when none of the case conditions match the expression's value. The default case is particularly useful for handling unexpected values or providing a general response when no specific case is matched.

Imagine a scenario where a user selects an option from a menu, but you want to ensure there's feedback even for unlisted options:

Javascript

// User's selection
var menuOption = 4;
// Evaluating the user's selection
switch (menuOption) {
    case 1:
        console.log("Home selected");
        break;
    case 2:
        console.log("Profile selected");
        break;
    case 3:
        console.log("Settings selected");
        break;
    default:
        // This block executes if none of the above cases match
        console.log("Invalid selection");
}
// Outputs: "Invalid selection" for option 4

. . . .

In this example, default acts as a catch-all for any selection that doesn't match cases 1, 2, or 3, providing a clear message to the user.

Common Code Blocks

Switch statements in JavaScript allow for multiple cases to share the same code block, which is useful when different inputs should result in the same output.

Example: Business Hours

Consider a simple program that checks if a day is a business day:

Javascript

// Today's day
var day = "Saturday";
// Evaluating the day for business hours
switch (day) {
    case "Monday":
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
    case "Friday":
        // Common code block for weekdays
        console.log("Open for business");
        break;
    case "Saturday":
    case "Sunday":
        // Common code block for weekends
        console.log("Closed for business");
        break;
}
// Outputs: "Closed for business" for "Saturday"

. . . .

Here, weekdays share a common response, as do weekend days, showcasing how multiple cases can lead to a single output without repeating code.

Strict Comparison

The switch statement uses strict comparison (===) to match the expression's value with case labels, meaning the type and value must be exactly the same.

Example: User Age Group

A basic example to demonstrate strict comparison, where a string and a number are distinguished:

Javascript

// User's age as a string
var age = "18";
// Evaluating the age
switch (age) {
    case 18:
        console.log("Teenager");
        break;
    case "18":
        // This block is executed because of strict comparison
        console.log("Adult in string form");
        break;
    default:
        console.log("Age group unknown");
}
// Outputs: "Adult in string form" because age is a string

. . . .

In this example, the distinction between "18" (string) and 18 (number) is crucial due to strict comparison, illustrating how the switch statement differentiates between seemingly similar values based on type.

Understanding how to use the switch statement enhances your ability to handle multiple conditions efficiently in JavaScript. Its clear structure and ability to share code blocks among cases make it a valuable tool for writing concise and readable conditional logic.

JavaScript - If...Else

Quiz

Mark as Completed

On this page

Execution Flow

Example

The default Keyword

Example: Menu Options

Common Code Blocks

Example: Business Hours

Strict Comparison

Example: User Age Group